<template>
  <div class="html1_18">
      <h1>1.18 HTML5应用实例</h1>
      <h2>ToDoList实例：</h2>
      <p>
        <pre>
          Html部分：
&lt;!DOCTYPE html>
&lt;html lang="en">
&lt;head>
    &lt;meta charset="UTF-8">
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0">
    &lt;title>Document&lt;/title>
    &lt;link rel="stylesheet" href="./css/style.css">
    &lt;link rel="stylesheet" href="./css标签字体awesome/css/font-awesome.min.css">
    &lt;script src="./js/jquery-3.5.1.min.js">&lt;/script>
    &lt;script src="./js/todolist.js">&lt;/script>
&lt;/head>
&lt;body>
    &lt;header>
        &lt;section>
            &lt;label for="title">ToDoList&lt;/label>
            &lt;input type="text" id="title" name="title" placeholder="添加ToDo" required>
        &lt;/section>
    &lt;/header>
    &lt;section>
        &lt;h2>正在进行 &lt;span id="todocount">&lt;/span>&lt;/h2>
        &lt;ol id="todolist" class="demo-box">
        &lt;/ol>
        &lt;h2>已经完成 &lt;span id="donecount">&lt;/span>&lt;/h2>
        &lt;ul id="donelist">
        &lt;/ul>
    &lt;/section>
    &lt;footer>
        Copyright &copy; 2021 todolist.cn&lt;a href='javascript:;'> Clear&lt;/a>
    &lt;/footer>
&lt;/body>
&lt;/html>
Css部分：
* {
    margin: 0;
    padding: 0;
    list-style: none;

    a {
        text-decoration: none;
    }

    body {
        background-color: rgb(224, 224, 224);
    }
}

header {
    width: 100%;
    height: 50px;
    background-color: rgb(48, 48, 48);

    section {
        margin: 0 auto;
        width: 700px;

        label {
            color: rgb(231, 229, 229);
            font-size: 25px;
            float: left;
            margin-top: 8px;
        }

        input {
            float: right;
            border-radius: 6px;
            outline: none;
            width: 400px;
            height: 30px;
            margin-top: 10px;
            padding-left: 10px;
            box-sizing: border-box;
        }
    }
}

section {
    width: 700px;
    margin: 20px auto;

    h2 {
        width: 700px;
        height: 35px;
        display: flex;
        margin-top: 20px;
        justify-content: space-between;

        span {
            display: block;
            width: 24px;
            height: 24px;
            border-radius: 12px;
            background-color: rgb(190, 189, 189);
            color: black;
            font-size: 16px;
            font-weight: 400;
            line-height: 35px;
            text-align: center;
            margin-top: 5px;
            line-height: 24px;
        }
    }

    #donelist {
        li {
            background-color: rgb(206, 204, 204);
            color: rgb(105, 105, 105);
            border-left: gray 5px solid;

            &::before {
                content: ";
            }
        }

    }

    li {
        height: 30px;
        width: 700px;
        cursor: pointer;
        background-color: white;
        border-radius: 4px;
        margin: 8px 0;
        padding-right: 10px;
        padding-left: 2px;
        box-sizing: border-box;
        position: relative;
        line-height: 30px;
        border-left: blue 5px solid;

        input {
            width: 20px;
            height: 20px;
            position: absolute;
            top: 5px;
        }

        p {
            display: inline;
            margin-left: 28px;
        }

        a {
            float: right;
            color: rgb(168, 168, 168);
        }

        &::before {
            content: ";
            padding-right: 3px;
        }
    }

}

footer {
    text-align: center;
    color: rgb(124, 124, 124);

    a {
        color: rgb(85, 85, 85);
    }
}
Js部分：
$(function () {
    load();
    $("#title").on("keydown", function (e) {
        if (e.keyCode == 13) {
            if ($(this).val() == "") {
                alert(");
            } else {
                var local = getDate();
                local.push({
                    title: $(this).val(),
                    done: false
                });
                saveDate(local);
                load();
            }
            $(this).val("");
        }
    });
    $("ol,ul").on("click", "a", function () {
        var data = getDate();
        var index = $(this).attr("id");
        data.splice(index, 1);
        saveDate(data);
        load();
    });
    $("footer").on("click", "a", function () {
        var data = getDate();
        data.splice(0, data.length);
        saveDate(data);
        load();
    })
    $("ol, ul").on("click", "input", function () {
        var data = getDate();
        var index = $(this).siblings("a").attr("id");
        data[index].done = $(this).prop("checked");
        saveDate(data);
        load();
    });

    function getDate() {
        var data = localStorage.getItem("todolist");
        if (data !== null) {
            return JSON.parse(data);
        } else {
            return []
        }
    };

    function saveDate(data) {
        localStorage.setItem("todolist", JSON.stringify(data));
    };

    function load() {
        var data = getDate();
        var doneCount = 0;
        var todoCount = 0;
        $("ol,ul").empty();
        $.each(data, function (i, n) {
            if (n.done) {
                $("ul").prepend("&lt;li>&lt;input type='checkbox' checked>&lt;p>" + n.title + "&lt;/p>&lt;a href='javascript:;' id='" + i + "' class='fa fa-minus'>&lt;/a>&lt;/li>");
                doneCount++;
            } else {
                $("ol").prepend("&lt;li>&lt;input type='checkbox'>&lt;p>" + n.title + "&lt;/p>&lt;a href='javascript:;' id='" + i + "' class='fa fa-minus'>&lt;/a>&lt;/li>");
                todoCount++;
            }
        })
        $("#todocount").text(todoCount);
        $("#donecount").text(doneCount);
    };
})
效果图及实例展示：
        </pre>
      </p>
      <video src="../assets/h5实例视频/todolist案例.mp4" width="600px" controls></video>
       <img src="../assets/images/2.64.png" alt="">
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>